본문으로 건너뛰기

useEffect 소개와 라이프사이클 제어

React를 사용할 때, 컴포넌트의 생명 주기(lifecycle)를 효과적으로 제어하는 것은 매우 중요합니다. useEffect 훅(Hook)은 이런 생명 주기 관리를 돕는 핵심 도구입니다. useEffect를 이해하고 잘 활용하는 것은 React 개발의 기본이라고 할 수 있습니다.

useEffect란?​

useEffect는 컴포넌트가 렌더링된 후 특정 작업을 수행하도록 하는 훅입니다. 예를 들어, 데이터 fetch, 수동으로 DOM 조작, 또는 타이머 설정 등이 이에 해당합니다. useEffect는 React의 클래스 컴포넌트에서 사용하던 componentDidMount, componentDidUpdate, componentWillUnmount 메서드를 대체합니다.

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    // 여기에 실행할 코드를 작성합니다.
    console.log('컴포넌트가 마운트되었습니다.');

    // cleanup 함수로 컴포넌트가 언마운트될 때 실행할 코드를 반환합니다.
    return () => {
      console.log('컴포넌트가 언마운트되었습니다.');
    };
  }, []); // 빈 배열을 두 번째 인수로 전달하여 처음 마운트될 때만 실행됩니다.

  return <div>안녕하세요, React!</div>;
}

export default ExampleComponent;

주요 개념​

  • 마운트 시점: 컴포넌트가 처음 화면에 나타날 때 useEffect 안의 코드가 실행됩니다.
  • 업데이트 시점: 컴포넌트의 상태나 props가 변경되어 다시 렌더링될 때 useEffect가 실행됩니다. 이 때, 두 번째 인수로 전달한 배열 안의 값이 변경될 때만 실행됩니다.
  • 언마운트 시점: 컴포넌트가 화면에서 사라질 때, useEffect에서 반환한 함수가 실행됩니다.

의존성 배열​

useEffect의 두 번째 인수로 전달되는 배열을 의존성 배열이라고 합니다. 이 배열에 포함된 값이 변경될 때마다 useEffect가 다시 실행됩니다. 이 배열을 올바르게 설정하는 것이 중요합니다.

useEffect(() => {
  console.log('의존성 배열이 변경될 때마다 실행됩니다.');
}, [의존성1, 의존성2]); // 의존성 배열 안의 값이 변경될 때만 실행

주의할 점​

  1. 빈 배열([]): useEffect를 컴포넌트가 처음 마운트될 때만 실행하고 싶다면, 빈 배열을 전달합니다. 이 경우 업데이트 시에는 실행되지 않습니다.
  2. 생략한 경우: 두 번째 인수를 생략하면 컴포넌트가 업데이트될 때마다 useEffect가 실행됩니다. 이는 성능에 영향을 미칠 수 있으므로 주의가 필요합니다.
  3. 의존성 배열 관리: 의존성 배열 안에 포함할 값을 정확히 지정하지 않으면, 의도치 않은 결과를 초래할 수 있습니다. 예를 들어, 모든 상태 변수를 포함하지 않으면 특정 상태 변화가 useEffect를 트리거하지 않을 수 있습니다.

라이프사이클 제어 예시​

다음은 API 호출을 통해 데이터를 가져오고, 컴포넌트가 언마운트될 때 타이머를 정리하는 예시입니다.

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();

    const timer = setInterval(() => {
      console.log('타이머 실행 중...');
    }, 1000);

    // cleanup 함수에서 타이머 정리
    return () => clearInterval(timer);
  }, []); // 빈 배열로 처음 마운트될 때만 실행

  return (
    <div>
      {data ? <div>데이터: {JSON.stringify(data)}</div> : <div>로딩 중...</div>}
    </div>
  );
}

export default DataFetchingComponent;

위 예시에서 fetchData 함수는 컴포넌트가 처음 마운트될 때 한 번 실행되며, 타이머는 매 초마다 콘솔에 메시지를 출력합니다. 컴포넌트가 언마운트될 때 타이머를 정리하여 메모리 누수를 방지합니다.

더 알아보기​

  • 의존성 배열: 의존성 배열의 역할과 올바르게 관리하는 방법.
  • 비동기 작업: useEffect에서 비동기 작업을 다루는 방법.
  • 클린업 함수: 컴포넌트가 언마운트될 때 실행할 작업 설정.

내용 요약과 다음 주제​

useEffect는 React 컴포넌트의 생명 주기를 관리하는 핵심 훅으로, 마운트, 업데이트, 언마운트 시점을 제어할 수 있습니다. 올바른 의존성 배열 설정과 클린업 함수를 통해 효과적으로 활용할 수 있습니다. 다음 주제인 useEffect를 기명 함수와 함께 사용하는 방법에서는 useEffect 내에서 명명된 함수를 사용하는 방법에 대해 다룰 예정입니다.